<template>
	<view>
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-green" :isBack="true">
				<block slot="backText">返回</block>
				<block slot="content">我的预约</block>
			</cu-custom>
			<uni-section title="我的预约" type="line" class="animation-scale-down" :style="[{animation: 'show 0.5s 1'}]">
				<uni-collapse accordion >
					<uni-collapse-item>
						<template v-slot:title>
							<view class="cu-bar bg-white">
								<view class="action">
									<text class="cuIcon-title text-blue"></text> 待使用
								</view>
							</view>
						</template>
						<view class="content">
							<view class="text-center margin text-gray" v-if="verifyList.length===0">
								暂无数据
							</view>
							<view class="cu-list menu">
								<uni-list v-for="item in verifyList" :key="item.id" :border="false">
									<uni-card title="预约场所：" mode="title" :is-shadow="true" :extra="item.name"
										note="Tips">
										<view>
											预约时间段：
											<text class="text-gray">{{item.start|timeFormat('yyyy-mm-dd')}} {{item.start|timeFormat('hh:mm')}} - {{item.end|timeFormat('hh:mm')}}</text>
										</view>
										<view>
											预约人数：{{item.applyNum}}
										</view>
										<view>
											地址：{{item.address}}
										</view>
										<view slot="actions" class="card-actions">
											<button size="mini" class="btn2"
												@click="cancelReservation(item.id)">取消预约</button>
										</view>
									</uni-card>
								</uni-list>
							</view>
						</view>
					</uni-collapse-item>
					<uni-collapse-item>
						<template v-slot:title>
							<view class="cu-bar bg-white">
								<view class="action">
									<text class="cuIcon-title text-green"></text> 使用中
								</view>
							</view>
						</template>
						<view class="content">
							<view class="text-center margin text-gray" v-if="passList.length===0">
								暂无数据
							</view>
							<view class="cu-list menu">
								<uni-list v-for="item in passList" :key="item.id" :border="false">
									<uni-card title="预约场所：" mode="title" :is-shadow="true" :extra="item.name"
										note="Tips">
										<view>
											预约时间段：
											<text class="text-gray">{{item.start|timeFormat('yyyy-mm-dd')}} {{item.start|timeFormat('hh:mm')}} - {{item.end|timeFormat('hh:mm')}}</text>
										</view>
										<view>
											预约人数：{{item.applyNum}}
										</view>
										<view>
											地址：{{item.address}}
										</view>
									</uni-card>
								</uni-list>
							</view>
						</view>
					</uni-collapse-item>
					<uni-collapse-item>
						<template v-slot:title>
							<view class="cu-bar bg-white">
								<view class="action">
									<text class="cuIcon-title text-red"></text> 已过期
								</view>
							</view>
						</template>
						<view class="content">
							<view class="text-center margin text-gray" v-if="expireList.length===0">
								暂无数据
							</view>
							<view class="cu-list menu">
								<uni-list v-for="item in expireList" :key="item.id" :border="false">
									<uni-card title="预约场所：" mode="title" :is-shadow="true" :extra="item.name"
										note="Tips">
										<view>
											预约时间段：
											<text class="text-gray">{{item.start|timeFormat('yyyy-mm-dd')}} {{item.start|timeFormat('hh:mm')}} - {{item.end|timeFormat('hh:mm')}}</text>
										</view>
										<view>
											预约人数：{{item.applyNum}}
										</view>
										<view>
											地址：{{item.address}}
										</view>
									</uni-card>
								</uni-list>
							</view>
						</view>
					</uni-collapse-item>
					<uni-collapse-item>
						<template v-slot:title>
							<view class="cu-bar bg-white">
								<view class="action">
									<text class="cuIcon-title text-gray"></text> 已取消
								</view>
							</view>
						</template>
						<view class="content">
							<view class="text-center margin text-gray" v-if="cancelList.length===0">
								暂无数据
							</view>
							<view class="cu-list menu">
								<uni-list v-for="item in cancelList" :key="item.id" :border="false">
									<uni-card title="预约场所：" mode="title" :is-shadow="true" :extra="item.name"
										note="Tips">
										<view>
											预约时间段：
											<text class="text-gray">{{item.start|timeFormat('yyyy-mm-dd')}} {{item.start|timeFormat('hh:mm')}} - {{item.end|timeFormat('hh:mm')}}</text>
										</view>
										<view>
											预约人数：{{item.applyNum}}
										</view>
										<view>
											地址：{{item.address}}
										</view>
									</uni-card>
								</uni-list>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</uni-section>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'myAppointment',
		data() {
			return {
				passList: [{
					id: "117",
					address: "西区篮球场",
					time: "10:00-11:00",
					amount: "10",
					message: "message",
				}],
				verifyList: [{
					id: "1171",
					address: "西区篮球场",
					time: "10:00-11:00",
					amount: "10",
					message: "message",
				}],
				cancelList: [{
					id: "11712",
					address: "西区篮球场",
					time: "10:00-11:00",
					amount: "10",
					message: "message",
				}],
				expireList: [{
					id: "213236",
					address: "西区篮球场",
					time: "10:00-11:00",
					amount: "10",
					message: "message",
				}, ],
			};
		},
		created() {},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this.getList()
			},
			getList() {
				this.$http.get('/publicplace/znzfPublicApply/queryByUserId', {
					params: {
						userId: this.$store.getters.userid
					}
				}).then((res) => {
					console.log(1, res)
					if (res.data.success) {
						//0-待使用 1-使用中 2-已过期 3-已取消
						this.verifyList = res.data.result[0].znzfMyPublicApplyParamList
						this.passList = res.data.result[1].znzfMyPublicApplyParamList
						this.expireList = res.data.result[2].znzfMyPublicApplyParamList
						this.cancelList = res.data.result[3].znzfMyPublicApplyParamList
					} else {
						this.$tip.alert('获取预约信息失败' + res.data.message);
					}
				})
			},
			cancelReservation(id) {
				console.log(id)
				this.$http.get('/publicplace/znzfPublicApply/cancelReservation', {
					params: {
						publicApplyId: id
					}
				}).then(res => {
					console.log(res)
					if (res.data.success) {
						this.$tip.success('取消预约成功');
						this.getList()
					} else {
						this.$tip.alert('取消预约失败' + res.data.message);
					}

				})
			},
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.btn2 {
		display: block;
		width: 45%;
		margin: 0 auto;
		margin-bottom: 10px;
		color: #FFFFFF;
		background-color: #007AFF;
	}
</style>
